<template>
  <div class="container enroll">
    <div class="sign-record">
      <div class="sign-record-title">
        出勤记录
      </div>
      <div class="sign-record-list">
        <div
          class="sign-record-list-item"
          v-for="(item, index) in locationlist"
          :key="index"
        >
          <div class="sign-record-list-date">
            {{item.date}}
          </div>
          <div class="sign-record-list-info">
            {{item.info}}
          </div>
          <div
            class="sign-record-list-state"
            :class="item.state == 1 ? 'grey' : 'red'"
          >
            {{item.state == 1 ? '出勤' : '未出勤'}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UserCell from '@/components/cell/user'
export default {
  components: {
    UserCell
  },

  data () {
    return {
      locationlist: [
        {
          id: 1,
          info: '奥体中心体育场北广场',
          date: '2021-12-30',
          state: 1
        },
        {
          id: 2,
          info: '奥体中心体育场北广场',
          date: '2021-12-29',
          state: 0
        },
        {
          id: 3,
          info: '奥体中心体育场北广场',
          date: '2021-12-28',
          state: 1
        },
        {
          id: 4,
          info: '奥体中心体育场北广场',
          date: '2021-12-27',
          state: 1
        },
        {
          id: 5,
          info: '奥体中心体育场北广场',
          date: '2021-12-26',
          state: 0
        },
        {
          id: 6,
          info: '奥体中心体育场北广场',
          date: '2021-12-25',
          state: 1
        }
      ]
    }
  },
  onLoad (option) {
    this.id = option.id
  },
  methods: {

  },
  onShow () {

  },
  onShareAppMessage (res) {

  }
}
</script>

<style lang="less">
@grey: #666;
@red: red;
.sign-record {
  clear: both;
  padding: 10px;
  &-title {
    font-weight: 800;
  }
  &-list {
    font-size: 14px;
    &-item {
      height: 25px;
      line-height: 25px;
      margin: 10px 5px;
      color: @grey;
    }
    &-date {
      float: left;
    }
    &-info {
      float: left;
      padding: 0px 10px;
    }
    &-state {
      float: right;
    }
  }
}
.grey {
  color: @grey;
}
.red {
  color: @red;
}
</style>
